<template>
   <div id='main'>
        <Theader title='喵喵电影'/>
        <div id="content">
            <div class="movie_menu">
				<router-link class="city_name" 
                to='/movie/city' tag='div'> 
					<span>{{$store.state.city.nm}}</span><i class="iconfont icon-lower-triangle"></i>
				</router-link>
				<div class="hot_swtich">
					<router-link to='/movie/nowplaying' tag='div' class="hot_item">正在热映</router-link>
					<router-link to='/movie/comingsoon' tag='div' class="hot_item">即将上映</router-link>
				</div>
				<router-link class="search_entry active" to='/movie/search' tag='div'>
					<i class="iconfont icon-sousuo"></i>
				</router-link>
			</div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>            
        </div>
        <Tfooter/>
        <router-view name='detail'></router-view>
   </div>
</template>
<script>
import Theader from '@/components/Theader'
import Tfooter from '@/components/Tfooter'
export default {
    name:'Movie',
    components:{
        Theader,Tfooter
    },
    mounted(){
        // 别人正在深圳
        // 你通过定位发现也是深圳
        setTimeout(async ()=>{
            let data = await this.$axios.get('/api/citylocal');
            let nm = data.data.nm;
            let id = data.data.id;
            if(nm!=this.$store.state.city.nm){
                // 弹出弹框
                this.$confirm('当前定位:深圳', '', {
                    // 确认按钮显示的文字
                    confirmButtonText: '切换城市',
                    // 取消按钮显示的文字
                    cancelButtonText: '取消',
                }).then(() => {
                    // console.log('你点了切换城市按钮')
                    // 把你的城市信息存储到本地存储
                    window.localStorage.setItem('nm',nm)
                    window.localStorage.setItem('id',id)
                    // 本地存储修改页面不会响应式刷新，手动重新加载
                    window.location.reload()
                })
                .catch(()=> {
                    console.log('你点了取消/关闭按钮')
                });
            }
        },3000)
    }
}
</script>

<style scoped>
#content{ flex:1; overflow:auto; margin-bottom: 50px; position: relative; display: flex; flex-direction:column;}
#content .movie_menu{ width: 100%; height: 45px; border-bottom:1px solid #e6e6e6; display: flex; justify-content:space-between; align-items:center; background:white; z-index:10;}
.movie_menu .city_name{ margin-left: 20px; height:100%; line-height: 45px;}
/* .movie_menu .city_name.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .city_name.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}

.movie_menu .hot_swtich{ display: flex; height:100%; line-height: 45px;}
.movie_menu .hot_item{ font-size: 15px; color:#666; width:80px; text-align:center; margin:0 12px; font-weight:700;}
/* .movie_menu .hot_item.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .hot_item.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}

.movie_menu .search_entry{ margin-right:20px; height:100%; line-height: 45px;}
/* .movie_menu .search_entry.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .search_entry.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}

.movie_menu .search_entry i{  font-size:24px; color:red;}

.el-message-box{
    width: 100px;
}
</style>